<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
	<title>致一年未见的你</title>
	<link rel="stylesheet" href="css/common.css">
	<link rel="stylesheet" href="css/pikaday.css">
	<style type="text/css">
		body{background: none;}
		.sucwrap{padding:2% 10%;color:#fff;background: url(images/suc_02.png) no-repeat;background-size: 100% 100%;}
		.suc_tip{font-size: 16px;font-weight: bold;margin:15px 0;}
		.footer{position: absolute;bottom:0;}
		.suc{font-weight: 500;margin:5px 50px 2px 43px;color:black;}
		.cen.suc {color: black;}
		/*model 样式*/
		.model{
			width: 100%;
		    height: 100%;
		    background: rgba(0, 0, 0, 0.8);
		    position: fixed;
		    top: 0;
		    left: 0;
		    z-index:1;
		    display:block;
		}
		.model-wrap{
			position: absolute;
			left:50%;
			top:50%;
			transform: translate(-50%, -50%);
			width:310px;
			background: #fff;
			color: #838282;
		}
		.top_pic{
			margin-top: -33px;
		}
		.top_smile{
			width:45%;
			margin:0 auto;
			position: relative;
			top:-30px;
		}
		.close{
			position: relative;
		}
		.seceltwrap{
			position: relative;
		    width: 65%;
		    margin: 0 auto;
		    padding:2px 10px;
		    margin-top: 10px;
		    border: 1px solid #55bcf6;
		    border-radius: 5px;
		    height: 35px;
		    line-height: 38px;
		    font-size: 16px;
		    background: url("http://ourjs.github.io/static/2015/arrow.png") no-repeat 180px 16px;
		}
		.submit-btn{
			width:50%;
			padding:10px 0;
		}
		 .pic_bg{
		 	position: relative;
    		bottom: -15px;
		 }
		 .select_01{
		 	width: 70%;
		 	height:35px;
		 	background: transparent;
			line-height:35px;
			color:#313131;
			font-size: 16px;
			border-color: transparent;
			border-radius: 5px;
			outline: 0;
			appearance:none;
			-webkit-appearance:none;
		 }
		 .select_value01{
		 	 margin-right: 5px;
		 }
		 #datecontrl{
		 	border:none;
		 	outline:none;
		 	background: transparent;
		 }
		 .pika-single{
		 	left: 50%!important;
		    transform: translate(-50%, -50%);
		    margin-top: 120px;
		 }
		  .model-2{
			width: 100%;
		    height: 100%;
		    background: rgba(0, 0, 0, 0.8);
		    position: fixed;
		    top: 0;
		    left: 0;
		    z-index:1;
		    display:block;
		}
		.model-wrap-2{
			position: absolute;
			left:50%;
			top:50%;
			transform: translate(-50%, -50%);
			width:310px;
			background: #fff;
			color: #838282;
			border-radius: 20px;
		}
		.model-3{
			width: 100%;
		    height: 100%;
		    background: rgba(0, 0, 0, 0.8);
		    position: fixed;
		    top: 0;
		    left: 0;
		    z-index:1;
		    display:none;
		}
		.model-wrap-3{
			position: absolute;
			left:50%;
			top:50%;
			transform: translate(-50%, -50%);
			width:310px;
			background: #fff;
			color: #838282;
			border-radius: 20px;
		}
	</style>
</head>
<body>
	<div class="pic">
		<img src="images/suc_01.png">
	</div>
	<div class="sucwrap">
		<p>券号：02020202</p>
		<div class="center suc_tip">
			请于2017年9月30日前进行预约，不然就失效了！
		</div>
		<div class="paddB-20">快点戳下面预约按钮去预约，到店后出示券号即可享受高端动力系统养护套餐咯。</div>
	</div>
   <!--   <div class="width-80 pic marginY-30 auto">
		<img src="images/suc_btn.png" alt="">
	</div>  -->
	<div class="pic footer">
		<img src="images/footer.png" alt="">
	</div>

	<div class="model">
		<div class="model-wrap">
			<div class="pic top_pic">
				<img src="images/suc_03.png" alt="">
			</div> 
			<div class="seceltwrap clearfix">
				<div class="select_value01 float-left">省份</div>
				<select class="select_01 float-left" id="province" name="province">
				<option value="0">请选择</option>  
					<!-- <option value="">河北</option>
					<option value="">石家庄</option>
					<option value="">石家庄</option> -->
				</select>
				
			</div>
			<div class="seceltwrap clearfix">
				<div class="select_value01 float-left">城市</div>
				<select class="select_01 float-left" id="city" name="city">
				<option value="0">请选择</option>  
					<!-- <option value="">石家庄</option>
					<option value="">石家庄</option>
					<option value="">石家庄</option> -->
				</select>
			</div>
			<div class="seceltwrap clearfix">
				<div class="select_value01 float-left">经销商</div>
				<select class="select_01 float-left" id="dealer" name="dealerCode">
				   <option value="0">请选择</option>  
				<!-- 	<option value="">石家庄</option>
					<option value="">石家庄</option>
					<option value="">石家庄</option> -->
				</select>
			</div>
			<div class="seceltwrap clearfix">
				<div class="select_value01 float-left">预约时间</div>
				<div class="float-left width-62 select_01">
					<input id="datecontrl" readonly="readonly"  class="width-100" value="0" type="text" name="reservedate">
				</div>
			</div>
			<div class="cen suc">
			  	<p>奖券有效期截止至2017年10月31日</p>
			  	<p>请在截止日之前到店使用!</p>
		     </div>
			<div class="pic submit-btn auto">
				<img id="sub" src="images/submit.png" alt="">
			</div>
			<div class="pic pic_bg">
				<img src="images/suc_04.png" alt="">
			</div>
		</div>
	</div>
		<div class="model-2" style="display: none">
		<div class="model-wrap-2">
			<div class="pic top_smile">
				<img src="images/sub_succicon.png" alt="">
			</div>
			<div class="pic width-40 auto marginY-30 margintop-0">
				<img src="images/sub_success.png" alt="">
			</div>
		</div>
	</div>
	<div class="model-3">
		<div class="model-wrap-3">
			<div class="pic top_smile-3">
				<img src="images/smile.png" alt="">
			</div>
			<div class="pic width-40 auto">
				<img src="images/if_sub.png" alt="">
			</div>
			<div class="center marginY-30 margin-0">
				<a class="inline-block pic width-40" id="not"><img src="images/sub_01.png" alt=""></a>
				<a class="inline-block pic width-40" id="yes"><img src="images/sub_02.png" alt=""></a>
			</div>
		</div>
	</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/pikaday.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
<script type="text/javascript" src="js/notReturnFactorCommon.js"></script>
<script type="text/javascript" src="../../../js/common/common.js"></script>
<script type="text/javascript" src="../../../js/common/wechatCommon.js"></script>
<script>

var min=0;
var max=0;
var rootPath = getRootPath();
	$(function(){
		
		//showLoadding();
		//异步加载省份数据
		$.ajax({
			 headers:{'Cookie':document.cookie},
 			  //url:'http://127.0.0.1:9013/pointActivity/api/v1/province',
			  url:rootPath + '/pointActivity/api/v1/province',
			  contentType:"application/json", 
			  type:"POST", 
			  success:function(json){
		        	for(var i in json){
		        		var regionCode=i;
		        		var regionName=json[i];
		        		$("#province").append("<option value='"+regionCode+"'>"+regionName+"</option>"); 
		        	}
		        }
		  });
		//查询活动时间
		
		 $.ajax({
			headers:{'Cookie':document.cookie},
			//url:"http://127.0.0.1:9013/pointActivity/api/v1/getTime",
			url:rootPath + "/pointActivity/api/v1/getTime",
			type:"POST", 
			success:function(json){
			     min=json.min;
			     max=json.max;
			     var abcd = {
			 	        field: document.getElementById('datecontrl'),
			 	        firstDay: 1,
			 	        minDate: new Date(min),
			 	        maxDate: new Date(max),
			 	        yearRange: [2000,2020]
			 	    };
			 	//pikaday时间控件
			 	 var picker = new Pikaday(abcd);
			}
		 
		 });
		 //当选择省份后触发此事件
		 $("#province").change(function(){
			$("#city option:not(:first)").remove();
			$("#dealer option:not(:first)").remove();
			var regionCode=$(this).val();
			if(regionCode!=""){
				$.ajax({
					headers:{'Cookie':document.cookie},
					//url:"http://127.0.0.1:9013/pointActivity/api/v1/city",
					url:rootPath + "/pointActivity/api/v1/city",
					data:"regionCode="+regionCode,
					type:"POST", 
					success:function(json){
						for(var a in json){
							var cityCode=a;
							var cityName=json[a];
							 $("#city").append("<option value='"+cityCode+"'>"+cityName+"</option>");  
						}
					}
				});
			}
		 });
		//城市名称发生改变触发事件
		 $("#city").change(function(){
			 $("#dealer option:not(:first)").remove();
			 var cityid=$(this).val();
			 if(cityid!=""){
				 $.ajax({
					 	headers:{'Cookie':document.cookie},
 					 	//url:"http://127.0.0.1:9013/pointActivity/api/v1/dealer",
					 	url:rootPath + "/pointActivity/api/v1/dealer",
						data:"regionCode="+cityid,
						type:"POST", 
						success:function(json){
							for(var b in json){
								var cityCode=b;
								var cityName=json[b];
								 $("#dealer").append("<option value='"+cityCode+"'>"+cityName+"</option>");  
							}
						}
					});
			 }
		 });
		 var province=null;
		 var city=null;
		 var dealerCode=null;
	     var reservedate=null;
	     
		 //预约按键点击事件.pic submit-btn auto >img
		 $("#sub").click(function(){
				 province=$("#province").val();
				  city=$("#city").val();
				  dealerCode=$("#dealer").val();
				  reservedate=$("#datecontrl").val();
				
				   if(province=="0"){
					   showAlert("请选择预约的省份");
					   return;
				   }
				   if(city=="0"){
					   showAlert("请选择预约的城市");
					   return;
				   }
				   if(dealerCode=="0"){
					   showAlert("请选择预约的经销商");
					   return;
				   }
				   if(dealerCode=="message"){
					   showAlert("该城市暂未开通经销商！不能进行预约！");
					   return;
				   }
				   if(reservedate==""){
					   showAlert("请选择预约的时间");
					   return;
				   }
				   showConfirm();
		 });
		 //显示提示是否提交方法
		 function showConfirm(){
			 $(".model").hide();
			 $(".model-3").show();
			 //选择否
			 $("#not").click(function(){
				 $(".model-3").hide();
				 $(".model").show();
			 });
			 //选择是
             $("#yes").click(function(){
            	 $("#yes").unbind();
            	 saveReservation();
			 });
		 }
		 
		 function saveReservation(){
			 $.ajax({
				headers:{'Cookie':document.cookie},
 				//url:"http://127.0.0.1:9013/pointActivity/api/v1/verification",
				url:rootPath + "/pointActivity/api/v1/verification",
				type:"POST", 
				data:{"province":province,"city":city,"dealerCode":dealerCode,"reservedate":reservedate},
				beforeSend: function(){    
					$("#sub").unbind(); //取消事件
				},
				success:function(json){
					if(json.message=="重复预约异常"){
						showAlert("您已预约成功,请勿重复预约");
						$(".model-3").hide();
						$(".model").show();
						//取消预约按键事件
						$("#sub").unbind();
						//再次点击事件
						$("#sub").click(function(){
							 showAlert("您已预约成功,请勿重复预约");
						});
					}else if(json.message=="预约成功"){
						$(".model-3").hide();
						$(".model").hide();
						$(".model-2").show();
						//显示成功信息1秒后自动隐藏
						//setTimeout(function(){$(".model-2").hide();},1000);
						$(".model-2").click(function(){
							$(".model-2").hide()
						})
						$(".model").show();
						//取消预约按键事件
						$("#sub").unbind();
						//再次点击事件
						$("#sub").click(function(){
							 showAlert("您已预约成功,请勿重复预约");
						});
					}else{
						showAlert(json.message);
						$(".model-3").hide();
						$(".model").show();
					}
				},complete: function(){
					$("#sub").bind();  //绑定事件
				 },
				error:function(e){
					showAlert(e);
				}
			 }); 
		 }
	})
</script>	
</body>
</html>